<template>
  <div>
    <h3>child-a</h3>
    <div>来自父组件的数据：{{ msg }}</div>
    <el-input v-model="val"></el-input>
    <el-input v-model="modelVal"></el-input>
    <div>
      <h3>计算属性得到以下字符串:将上面输入框的内容转为大写</h3>
      <div>{{ computedVal }}</div>
    </div>
    <el-button @click="clickEvent">通知父组件</el-button>
    <div>这里是a组件，从b组件传值过来了：{{ msgFromB }}</div>
  </div>
</template>
<script setup lang="ts">
import eventBus from '@/utils/eventBus'
import { computed, onMounted, ref, watch, watchEffect } from 'vue'

const emit = defineEmits(['aToParent'])
defineProps({
  msg: String
})
let val = ref('')
let modelVal = ref('')
watch(val, async () => {
  const a = await new Promise((resolve) => {
    resolve(Math.ceil(Math.random() * 100 + 100))
  })
  console.log(a + val.value)
})
watchEffect(() => {
  const b = val.value + modelVal.value
  console.log(b)
})
const clickEvent = () => {
  emit('aToParent', val.value)
}
let computedVal = computed(() => {
  return val.value.toUpperCase()
})

let msgFromB = ref('')

onMounted(() => {
  eventBus.on('bToA', (val: string) => {
    msgFromB.value = val
  })
})
</script>
<style lang="scss" scoped></style>
